.scroll {
    --bb-scroll-width: #{$bb-scroll-width};
    --bb-scroll-height: #{$bb-scroll-height};
    --bb-scroll-thumb-radius: #{$bb-scroll-thumb-radius};
    --bb-scroll-thumb-bg: #{$bb-scroll-thumb-bg};
    --bb-scroll-thumb-hover-bg: #{$bb-scroll-thumb-hover-bg};
    --bb-scroll-track-bg: #{$bb-scroll-track-bg};
    height: 100%;
    scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0);
    scrollbar-width: thin;
    overflow: auto;

    &::-webkit-scrollbar {
        width: var(--bb-scroll-width);
        height: var(--bb-scroll-height);
    }

    &::-webkit-scrollbar-thumb {
        border-radius: var(--bb-scroll-thumb-radius);
        background-color: var(--bb-scroll-thumb-bg);
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: var(--bb-scroll-thumb-hover-bg);
    }

    &::-webkit-scrollbar-corner {
        background-color: var(--bs-body-bg);
    }

    &::-webkit-scrollbar-track {
        border-radius: var(--bb-scroll-thumb-radius);
        background-color: var(--bb-scroll-track-bg);
    }
}

@media (min-width: 992px) {
    .scroll {
        overflow: hidden;
    }

    .scroll:hover {
        overflow: auto;
    }
}
